package com.example.jetpackcomposelayouts

import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

/**
 * @author huangzehui
 * @date 1/5/2024 下午11:46 周三
 * @description
 * https://www.bilibili.com/video/BV1ob4y1a7ad?p=22&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
 */


@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // 通过createRefs创建引用，ConstraintLayout中的每个元素都需要关联一个引用
        val (button, text) = createRefs()


        Button(
            onClick = { },
            modifier = Modifier.constrainAs(button) {
                // 使用 Modifier.constrainAs 来提供，引用作为它的第一个参数
                // 在lambda表达式中指定约束规则
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "Button")
        }


        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)

            // 在 ConstraintLayout 中水平居中
            centerHorizontallyTo(parent)
        })


    }
}

@Composable
fun ConstraintLayoutContent2() {
    ConstraintLayout {
        val (button1, button2, text) = createRefs()

        Button(onClick = { }, modifier = Modifier.constrainAs(button1) {
            top.linkTo(parent.top, margin = 16.dp)
        }) {
            Text(text = "Button1")
        }

        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button1.bottom, margin = 16.dp)
            centerAround(button1.end)
        })


        // 将button1和text组合起来，建立一个屏障(barrier)
        // 屏障，就是把 button1 和 text 当成一个整体
        val barrier = createEndBarrier(button1, text)

        Button(onClick = { }, modifier = Modifier.constrainAs(button2) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(barrier)
        }) {
            Text(text = "Button2")
        }
    }
}

@Composable
fun LargeLayoutContent() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(text = "This is a ver jkjsdjfksjdkjfskdjfkjskdjfksjdkfjksjdfkjskdjfkjsdf ver",
//            maxLines = 1,
//            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.constrainAs(text) {
                linkTo(start = guideline, end = parent.end)
                width = Dimension.preferredWrapContent // 让文字自动换行
            })
    }
}


@Composable
fun DecoupledConstraintLayout() {
    /**
     * https://www.bilibili.com/video/BV1ob4y1a7ad?p=23&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
     */
    // 没有解耦的演示

    val marginTop = 16.dp

    ConstraintLayout {
        // 创建一个约束
        val (button, text) = createRefs()

        Button(onClick = { }, modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = marginTop)
        }) {
            Text(text = "Button2")
        }

        Text(text = "tiankon", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = marginTop)
        })
    }
}

@Composable
fun DecoupledConstraintLayout2() {
    /**
     * 解耦api，就是将约束条件可以写在另外的地方传递进来
     *
     * https://www.bilibili.com/video/BV1ob4y1a7ad/?p=23&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
     */
    BoxWithConstraints {
        val constraintSet = if (maxWidth < maxHeight) {
            decoupledConstraints(160.dp)
        } else {
            decoupledConstraints(16.dp)
        }


        ConstraintLayout(constraintSet = constraintSet) {

            Button(onClick = { }, modifier = Modifier.layoutId("button")) {
                Text(text = "Button")
            }

            Text(text = "Tiakong", modifier = Modifier.layoutId("text"))
        }

    }


}

/**
 * 获取一个约束集合
 */
private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        // 定义一个约束，通过指定 id
        val button = createRefFor("button")
        val text = createRefFor("text")


        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }

        constrain(text) {
            top.linkTo(button.bottom, margin = margin)
        }
    }
}
